<!-- hot-skill -->
<template>
  <div class="hot-skills">
    <h2 class="hotskills-title">热门技能</h2>
    <router-link to="/skill" class="skill-more"> 查看更多技能 </router-link>
    <span class="change-show">更换趋势图</span>
    <hr />
    <ul class="skills">
      <li v-for="item in 4" :key="item">
        <a href="#">
          <div class="skill">
            <i>{{ item }} .</i> <span>PS的基础使用</span>
          </div>
        </a>
      </li>
    </ul>
    <p class="detail">详情</p>
  </div>
</template>
<style scoped lang="less">
.hot-skills {
  position: relative;
  width: 45%;
  height: 40vh;
  background-color: #18181c;
  border-radius: 10px;
  .hotskills-title {
    font-size: 20px;
    text-align: center;
    margin-top: 15px;
    color: #d5d5d6;
  }
  .skill-more {
    position: absolute;
    z-index: 1000;
    background-color: #18181c;
    margin-right: 0px;
    padding-left: 8px;
    padding-right: 8px;
    right: 5px;
    font-size: 15px;
    color: #63e2b7;
    margin-top: 10px;
  }
  .change-show {
    position: absolute;
    left: 2px;

    font-size: 15px;
    color: #63e2b7;
    margin-top: 22px;
  }
  hr {
    margin-top: 20px;
    border: 0;
    border-top: 0.5px solid #63e2b7;
  }
  .skills {
    margin-left: 5px;
    margin-top: 28px;
    color: #d5d5d6;
    font-size: 18px;
    .skill {
      color: #d5d5d6;
      line-height: 50px;
      i {
        font-size: 18px;
        font-family: Bebas Neue;
        color: #63e2b7;
        margin-left: 5px;
      }
      span {
        font-size: 18px;
        font-style: italic;
      }
    }
  }
  .detail {
    position: absolute;
    right: 25px;
    bottom: 30px;
    font-size: 15px;
    color: #63e2b7;
  }
}
</style>
